<template>
  
        <!-- 小米轮四 保障服务开始 -->
        <div class="mifour">

            <div class="bao">

                <div class="zhang">
                    <img src="@/assets/xiaomi/si_baozhang.png" alt=""><br>
                    保障服务

                </div>

                <span class="shu"></span>

                <div class="zhang">
                    <img src="@/assets/xiaomi/si_qiye.png" alt=""><br>
                    企业团购

                </div>
                <span class="shu"></span>

                <div class="zhang">
                    <img src="@/assets/xiaomi/si_fma.png" alt=""><br>
                    F码通道

                </div>

                <span class="heng"></span>
                <span class="heng"></span>
                <span class="heng"></span>

                <div class="zhang">
                    <img src="@/assets/xiaomi/si_mifen.png" alt=""><br>
                    米粉卡
                </div>

                <span class="shu"></span>

                <div class="zhang">
                    <img src="@/assets/xiaomi/si_yijiu.png" alt=""><br>
                    以旧换新

                </div>

                <span class="shu"></span>
                <div class="zhang">
                    <img src="@/assets/xiaomi/si_huafei.png" alt=""><br>
                    话费充值

                </div>
            </div>
            <img src="@/assets/xiaomi/si1.jpg" alt="">
            <img src="@/assets/xiaomi/si2.jpg" alt="">
            <img src="@/assets/xiaomi/si3.jpg" alt="">

            <h6 style="clear: both;"></h6>
        </div>
        <!-- 小米轮四 保障服务结束 -->
</template>

<script>
export default {
  data () {
    return {
    }
  },

  components: {},

  methods: {}
}
</script>

<style scoped>

.mifour{
    width: 1226px;
    
    margin: auto;
    margin-top: 15px;
    padding-bottom: 30px;
}

.mifour .bao{
    width: 234px;
    height: 170px;
    background-color: #5f5750;
    float: left;

    margin-right: 14px;
}

.mifour>img{
    width: 316px;
    float: left;
}
.mifour>img:nth-of-type(2){
    margin-left: 15px;
}
.mifour>img:nth-of-type(3){
    margin-left: 15px;
}

.mifour .zhang{
    float:left;

    /* 234  * 170
    77  * 3  231 + 2 = 233

    ----------
    84 * 2 

    */
    width: 77px;
    height: 84px;
    color:#ccc;
    font-size: 8px;
    text-align: center;
}
.mifour .zhang img{
    width: 24px;

    margin: 18px 0px 5px;
}

.mifour .bao span{
    float: left;
}

.mifour .bao .shu{
    height: 64px;

    margin: 10px 0px;
    border-left: 1px solid rgba(200, 200, 200, .2);
    /* border-left: red 1px solid; */
}

.mifour .bao .heng{
  width: 67px;
  margin: 0px 5px;

    border-top: 1px solid rgba(200, 200, 200, .2);
    /* border-left: red 1px solid; */
}
</style>